<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">
          <svg-icon
            icon-class="wf-optimize"
            class="tab-pane-label-class"
          ></svg-icon>
          流程图
        </span>
        <div
          id="optimizeFlowGraph"
          style="overflow: auto; min-height: 200px"
        ></div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <svg-icon
            icon-class="title-base-info"
            class="tab-pane-label-class"
          ></svg-icon>
          基本信息
        </span>
        <wf-base-info :work-flow-info="currentWorkFlowNode"></wf-base-info>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { initRaphael } from '@/utils/PreWebRaphaelTools'
  import { getAction } from '@/api/action'
  import wfBaseInfo from '@/views/work-flow/components/WfBaseInfo'

  export default {
    name: 'OptimizeWorkFlowInfo',
    components: { wfBaseInfo },
    props: {
      currentWorkFlowNode: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        url: {
          graph: '/presoftasim/wf/workflow/graphData',
        },
      }
    },
    watch: {
      'currentWorkFlowNode.oid': function (newValue, oldValue) {
        this.clickWorkFlowNode(newValue)
      },
    },
    methods: {
      clickWorkFlowNode(oid) {
        // 查询绘制流程图的json数据
        let that = this
        getAction(this.url.graph, { workFlowId: oid }).then((res) => {
          that.initFun([res.data])
        })
      },
      initFun(jsonDataArr) {
        // this.$refs.rap.clearStates();
        initRaphael('optimizeFlowGraph', jsonDataArr)
      },
    },
  }
</script>
